<template>
  <div>
    <a-row style="margin-top: 16px">
      <a-col>
        <label style="color: rgba(107, 121, 142, 0.85)">Project Information</label>
      </a-col>
      <a-col v-if="index !== 0">
        <a-button type="link" danger size="small" @click="handleDeleteThis(index)">
          <a-space>
            <e-icon type="reduce" />
            Delete This
          </a-space>
        </a-button>
      </a-col>
    </a-row>
    <a-divider />
    <a-form ref="formInstance" :model="formData" layout="vertical" :rules="rules">
      <a-row :gutter="gutter">
        <a-col :span="12">
          <a-form-item label="Project Type" name="demandTypeID">
            <a-select
              v-model:value="formData.demandTypeID"
              :get-popup-container="triggerNode => triggerNode.parentNode"
              allow-clear
              @change="handleChangeType"
            >
              <a-select-option
                v-for="item in dict.demandTypes.filter(type => type.value < 5)"
                :key="item.value"
                :disabled="
                  modelValue.some((data, dataIndex) => dataIndex !== index && data.demandTypeID === item.value)
                "
              >
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :span="24">
          <a-form-item label="Project Content" name="demandContentID">
            <a-select
              v-model:value="formData.demandContentID"
              mode="multiple"
              :get-popup-container="triggerNode => triggerNode.parentNode"
            >
              <a-select-option v-for="item in demandTypeContentDict" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :span="12">
          <a-form-item label="Expected Turnover" name="proPOID">
            <a-select v-model:value="formData.proPOID" :get-popup-container="triggerNode => triggerNode.parentNode">
              <a-select-option v-for="item in dict.forecastPOs" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Internal Localization Process" name="processID">
            <a-select v-model:value="formData.processID" :get-popup-container="triggerNode => triggerNode.parentNode">
              <a-select-option v-for="item in dict.internalLocalizationProcess" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :span="12">
          <a-form-item label="Procurement Process" name="purchaseModeID">
            <a-select
              v-model:value="formData.purchaseModeID"
              :get-popup-container="triggerNode => triggerNode.parentNode"
            >
              <a-select-option v-for="item in dict.procurementProcess" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Current Pain Point" name="notGoodID">
            <a-select v-model:value="formData.notGoodID" :get-popup-container="triggerNode => triggerNode.parentNode">
              <a-select-option v-for="item in dict.painPoints" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :span="12">
          <a-form-item label="Contact Tool" name="talkChannelID">
            <a-select
              v-model:value="formData.talkChannelID"
              :get-popup-container="triggerNode => triggerNode.parentNode"
            >
              <a-select-option v-for="item in dict.communicationChannels" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Contact Person" name="talkModeID">
            <a-select v-model:value="formData.talkModeID" :get-popup-container="triggerNode => triggerNode.parentNode">
              <a-select-option v-for="item in dict.communicationModes" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :span="12">
          <a-form-item label="Client Review Process" name="aboutReviewID">
            <a-select
              v-model:value="formData.aboutReviewID"
              :get-popup-container="triggerNode => triggerNode.parentNode"
            >
              <a-select-option v-for="item in dict.reviewInfos" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Decision Maker and Role" name="decisionRoles">
            <a-input v-model:value="formData.decisionRoles" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :span="12">
          <a-form-item label="Platform Requirement" name="platformID">
            <a-select v-model:value="formData.platformID" :get-popup-container="triggerNode => triggerNode.parentNode">
              <a-select-option v-for="item in dict.platforms" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :span="24">
          <a-form-item label="Use of Localization (Quality Expectation)" name="useTranslationID">
            <a-select
              v-model:value="formData.useTranslationID"
              :get-popup-container="triggerNode => triggerNode.parentNode"
            >
              <a-select-option v-for="item in dict.translationPurpose" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :span="24">
          <a-form-item label="Recommendations on Pricing Strategy" name="suggestedQuote">
            <a-input v-model:value="formData.suggestedQuote" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :span="24">
          <a-form-item label="Pricing Strategy" name="strategyID">
            <a-select v-model:value="formData.strategyID" :get-popup-container="triggerNode => triggerNode.parentNode">
              <a-select-option v-for="item in dict.quotationStrategies" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import EIcon from '@/components/EIcon.vue'
import { useDict } from '@/hooks/useDict.js'
import ServicePrice from '@/api/client/servicePrice.js'
const props = defineProps({
  modelValue: {
    type: Array,
    default() {
      return []
    }
  },
  index: {
    type: Number,
    default: 0
  }
})
const gutter = [120, 16]
const dict = useDict()
const formInstance = ref(null)
const formData = ref(props.modelValue[props.index])
watch(
  () => props.modelValue.length,
  () => {
    formData.value = props.modelValue[props.index]
    if (formData.value) {
      ServicePrice.getDemandTypesContent(formData.value.demandTypeID).then(({ data }) => {
        demandTypeContentDict.value = data
      })
    }
  },
  { deep: true }
)
const demandTypeContentDict = ref([])
const rules = {
  demandTypeID: [
    {
      type: 'number',
      required: true,
      message: 'Please select',
      trigger: 'blur'
    }
  ],
  demandContentID: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one item',
      trigger: 'blur'
    }
  ],
  proPOID: [
    {
      type: 'number',
      required: true,
      message: 'Please select',
      trigger: 'blur'
    }
  ],
  processID: [
    {
      type: 'number',
      required: true,
      message: 'Please select',
      trigger: 'blur'
    }
  ],
  purchaseModeID: [
    {
      type: 'number',
      required: true,
      message: 'Please select',
      trigger: 'blur'
    }
  ],
  notGoodID: [
    {
      type: 'number',
      required: true,
      message: 'Please select',
      trigger: 'blur'
    }
  ],
  talkChannelID: [
    {
      type: 'number',
      required: true,
      message: 'Please select',
      trigger: 'blur'
    }
  ],
  talkModeID: [
    {
      type: 'number',
      required: true,
      message: 'Please select',
      trigger: 'blur'
    }
  ],
  aboutReviewID: [
    {
      type: 'number',
      required: true,
      message: 'Please select',
      trigger: 'blur'
    }
  ],
  decisionRoles: [
    {
      required: true,
      whitespace: true,
      message: 'Please input',
      trigger: 'blur'
    }
  ],
  platformID: [
    {
      type: 'number',
      required: true,
      message: 'Please select',
      trigger: 'blur'
    }
  ],
  useTranslationID: [
    {
      type: 'number',
      required: true,
      message: 'Please select',
      trigger: 'blur'
    }
  ],
  suggestedQuote: [
    {
      required: true,
      whitespace: true,
      message: 'Please input',
      trigger: 'blur'
    }
  ],
  strategyID: [
    {
      type: 'number',
      required: true,
      message: 'Please select',
      trigger: 'blur'
    }
  ]
}
const emits = defineEmits(['update:modelValue', 'delete'])
const handleChangeType = pid => {
  if (pid) {
    ServicePrice.getDemandTypesContent(pid).then(({ data }) => {
      demandTypeContentDict.value = data
    })
  } else {
    demandTypeContentDict.value = []
  }
  formData.value.demandContentID = []
}
const handleDeleteThis = index => {
  if (index > 0) {
    emits('delete', index)
  }
}
onMounted(() => {
  if (formData.value.demandTypeID) {
    ServicePrice.getDemandTypesContent(formData.value.demandTypeID).then(({ data }) => {
      demandTypeContentDict.value = data
    })
  }
})
defineExpose({ formInstance })
</script>

<style scoped></style>
